<template>
  <div
    :class="[
      'cjui-text-view', 
      'is-' + type, 
      type === 'md' && 'md-editor'
    ]"
  >
    <article
      :class="[
        'cjui-text-view-article', 
        type === 'md' && 'md-editor-preview default-theme'
      ]"
      v-dompurify-html="htmlText"
    >
    </article>
  </div>
</template>

<script lang="ts" setup>
// import 'md-editor-v3/lib/style.css'

defineOptions({
  name: 'CjuiTextView'
})

defineProps({
  htmlText: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'richText' // md | richText | text
  },
})
</script>

<style lang="scss">
// richtext
.cjui-text-view.is-richText {
  p {
    margin: 15px 0;
  }

  ul {
    padding-left: 2em;

    li {
      list-style: initial;
    }

    li + li {
      margin-top: 8px;
    }

    ul li {
      list-style: circle;
    }

    li + ul {
      margin: 8px 0;
    }
  }

  h4 {
    font-size: 16px;
    font-weight: bold;
  }

  img {
    max-width: 100%;
  }
}

// md
.cjui-text-view.is-md {
  height: auto;
  border: 0;

  pre code.hljs {
    display: block;
    padding: 1em;
    overflow-x: auto;
  }

  code.hljs {
    padding: 3px 5px;
  }

  .hljs {
    color: #abb2bf;
    background: #282c34;
  }

  .hljs-comment,
  .hljs-quote {
    font-style: italic;
    color: #5c6370;
  }

  .hljs-doctag,
  .hljs-formula,
  .hljs-keyword {
    color: #c678dd;
  }

  .hljs-deletion,
  .hljs-name,
  .hljs-section,
  .hljs-selector-tag,
  .hljs-subst {
    color: #e06c75;
  }

  .hljs-literal {
    color: #56b6c2;
  }

  .hljs-addition,
  .hljs-attribute,
  .hljs-meta .hljs-string,
  .hljs-regexp,
  .hljs-string {
    color: #98c379;
  }

  .hljs-attr,
  .hljs-number,
  .hljs-selector-attr,
  .hljs-selector-class,
  .hljs-selector-pseudo,
  .hljs-template-variable,
  .hljs-type,
  .hljs-variable {
    color: #d19a66;
  }

  .hljs-bullet,
  .hljs-link,
  .hljs-meta,
  .hljs-selector-id,
  .hljs-symbol,
  .hljs-title {
    color: #61aeee;
  }

  .hljs-built_in,
  .hljs-class .hljs-title,
  .hljs-title.class_ {
    color: #e6c07b;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: 700;
  }

  .hljs-link {
    text-decoration: underline;
  }
}
</style>
